React Bootstrap — Form Help Text, Native Validation

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Help Text

We can add help text to form controls.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control type="password" />
      <Form.Text muted>
        Your password must be 8-50 characters long.
      </Form.Text>
    </>
  );
}

to add help text below the form control.

Form.Text is the container for help text.

muted makes the text color lighter.

Disabled Forms

We can disable form controls with the disabled prop.

It’ll prevent user interaction and make it appear lighter.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form.Group>
        <Form.Label>Disabled input</Form.Label>
        <Form.Control placeholder="Disabled input" disabled />
      </Form.Group>
      <Form.Group>
        <Form.Label>Disabled dropdown</Form.Label>
        <Form.Control as="select" disabled>
          <option>Disabled dropdown</option>
        </Form.Control>
      </Form.Group>
      <Form.Group>
        <Form.Check type="checkbox" label="Disabled" disabled />
      </Form.Group>
    </>
  );
}

to add a text input box, drop down, and a checkbox that is disabled.

We can also add the disabled prop to the fieldset element surrounding the controls to disable all the controls inside it:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <fieldset disabled>
        <Form.Group>
          <Form.Label>Disabled input</Form.Label>
          <Form.Control placeholder="Disabled input" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Disabled dropdown</Form.Label>
          <Form.Control as="select">
            <option>Disabled dropdown</option>
          </Form.Control>
        </Form.Group>
        <Form.Group>
          <Form.Check type="checkbox" label="Disabled" />
        </Form.Group>
      </fieldset>
    </>
  );
}

Validation

We can add validation to our forms.

Yo do that, we add the validated prop to the form to set the state to indicate whether the form is validated or not.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [validated, setValidated] = React.useState(false);

  const handleSubmit = event => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

setValidated(true);
  };

return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="6">
          <Form.Label>First name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="First name"
            defaultValue="John"
          />
          <Form.Control.Feedback>Looks good</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="6">
          <Form.Label>Last name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Last name"
            defaultValue="Smith"
          />
          <Form.Control.Feedback>Looks good</Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group as={Col} md="6">
          <Form.Label>City</Form.Label>
          <Form.Control type="text" placeholder="City" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid city.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3">
          <Form.Label>Region</Form.Label>
          <Form.Control type="text" placeholder="Region" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid region.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3">
          <Form.Label>Postal Code</Form.Label>
          <Form.Control type="text" placeholder="Postal Code" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid postal code.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Group>
        <Form.Check
          required
          label="Agree to terms and conditions"
          feedback="You must agree before submitting."
        />
      </Form.Group>
      <Button type="submit">Submit</Button>
    </Form>
  );
}

We can add validation messages by using the Form.Control.FeedBack component.

The tyoe is set to invalid so that we display something when an invalid value is entered.

Is there’s no type prop value, then the message is displayed when the value is valid.

Also, on the form element, we have the validated prop to set the validation state of the form.

If it’s validated, then it should be set to true .

The handleSubmit handler gets the form element and then call the native checkValidity method to check for each field.

It checks again validation attributes like required and pattern .

Conclusion

We can help form help text below form controls.

Also, we can disable form controls to stop users from interacting with them.

We can also use native HTML5 form validation with React Bootstrap.